<div class="property-extents property {{style}}" id="{{property}}">
  <vde-can-drop-field style="{{canDropStyle}}" ng-if="!noDrop && canDropStyle">
  </vde-can-drop-field>

  <div ng-if="item.properties[property].inferred" id="inferred-popover"
       class="yellow-fade popover fade top in" vde-inferred-popover>
    <div class="arrow"></div>

    <div class="inner">
      {{item.inferredHints[property].hint}}
      <a class="btn btn-mini" ng-click="unInferProperty(property, item.properties[property].field)">
        {{item.inferredHints[property].action}}</a>
    </div>
  </div>

  <select ng-options="p.property as p.label for p in properties"
          ng-model="property"></select>

  <i ng-if="item.properties[property].scale && item.properties[property].scale.properties.type == 'ordinal' &&
            ((!item.properties[property].field && values.indexOf(item.properties[property].value) == -1) ||
              (item.properties[property].field && !fieldMatchesDomain))" class="icon-warning-sign"
     vde-tooltip="Warning: The field/value specified was not found in the scale's domain" position="top"></i>

  <div class="field">
    <div ng-if="item.properties[property].scale || item.properties[property].field">
      <vde-binding scale="item.properties[property].scale"
                   field="item.properties[property].field"></vde-binding>
    </div>

    <div ng-show="!item.properties[property].field">
      <input ng-if="item.properties[property].scale" type="text" class="number"
             ng-model="item.properties[property].value" ng-change="onchange()"
             ng-class="{'scaled-input': item.properties[property].scale != undefined,
             'disabled-input': item.properties[property].disabled}" />

      <input ng-if="!item.properties[property].scale" type="number" class="number"
             ng-model="item.properties[property].value" ng-change="onchange()"
             min="{{min}}" max="{{max}}"
             ng-class="{'scaled-input': item.properties[property].scale != undefined,
             'disabled-input': item.properties[property].disabled}" />
    </div>
  </div>

  <br clear="all" />
</div>